<template>
  <div>
    <ky-transfer
      v-model="value"
      class="transfer-center"
      filterable
      :titles="['原主机', '目标主机']"
      :data="data"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button
        class="kylin-button"
        @click="handleOk"
        :disabled="value.length < 1"
        >{{ $t("configure.issue") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import KyTransfer from "@/components/transfer/index.vue";
import { getIssueConfigureHost, issueConfigByHost } from "@/api/issue";
export default {
  components: {
    KyTransfer,
  },
  props: {
    ids: {
      type: Array,
      default: function () {
        return [];
      },
    },
    osVersion: {
      type: String,
    },
    osArch: {
      type: String,
    },
    osName: {
      type: String,
    },
  },
  data() {
    return {
      value: [],
      data: [],
    };
  },
  methods: {
    handleOk() {
      issueConfigByHost({ configIds: this.ids, hostIds: this.value }).then(
        (res) => {
          if (res.data.code == "0") {
            this.$message({
              type: "success",
              message: res.data.message,
            });
            this.$emit("click", "success");
            this.$router.push({
              name: "log_detail",
              params: { id: res.data.data.parentId },
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        }
      );
    },
    handleCancel() {
      this.$emit("click");
    },
  },

  mounted() {
    let data = {
      osVersion: this.osVersion,
      osArch: this.osArch,
      paged: false,
      osName: this.osName,
    };
    getIssueConfigureHost(data).then((res) => {
      res.data.data.results.forEach((item) => {
        this.data.push({
          key: item.id,
          label: item.ip,
        });
      });
    });
  },
};
</script>

<style scoped lang="scss">
.transfer-center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>